{% extends 'base.html' %}
{% load site_tags %}

{% block title %}Enroll — {{ course.title }}{% endblock %}

{% block content %}
<section class="py-5" style="background:#f8faff;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-7">
        <div class="mb-4">
          <a href="{% url 'courses:course_detail' course.slug %}" class="btn btn-outline-secondary btn-sm mb-3">
            <i class="bi bi-arrow-left me-1"></i>Back to course
          </a>
          <h1 class="h3 fw-bold mb-1">Confirm enrollment</h1>
          <p class="text-muted mb-0">You’re enrolling in <strong>{{ course.title }}</strong>. Please confirm your education background before continuing.</p>
        </div>

        <div class="card border-0 shadow-sm rounded-4">
          <div class="card-body p-4 p-md-5">
            <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
              <div>
                <div class="fw-bold">{{ course.title }}</div>
                <div class="small text-muted">
                  {% if course.price == 0 %}Free{% else %}{% format_price course.price %}{% endif %}
                  {% if course.category %} · {{ course.category.name }}{% endif %}
                </div>
              </div>
            </div>

            <h2 class="h6 fw-bold mb-3">Education background <span class="text-danger">*</span></h2>
            <form method="post" novalidate>
              {% csrf_token %}
              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label fw-semibold small">{{ form.qualification.label }}</label>
                  {{ form.qualification }}
                  {% if form.qualification.errors %}<div class="text-danger small">{{ form.qualification.errors.0 }}</div>{% endif %}
                </div>
                <div class="col-md-6">
                  <label class="form-label fw-semibold small">{{ form.last_degree.label }}</label>
                  {{ form.last_degree }}
                  {% if form.last_degree.errors %}<div class="text-danger small">{{ form.last_degree.errors.0 }}</div>{% endif %}
                </div>
                <div class="col-md-4">
                  <label class="form-label fw-semibold small">{{ form.age.label }}</label>
                  {{ form.age }}
                  {% if form.age.errors %}<div class="text-danger small">{{ form.age.errors.0 }}</div>{% endif %}
                </div>
                <div class="col-12">
                  <label class="form-label fw-semibold small">{{ form.work_experience.label }}</label>
                  {{ form.work_experience }}
                  {% if form.work_experience.errors %}<div class="text-danger small">{{ form.work_experience.errors.0 }}</div>{% endif %}
                </div>
              </div>
              <button type="submit" class="btn btn-primary fw-semibold w-100 mt-4 py-2">
                <i class="bi bi-bookmark-plus me-1"></i>Continue enrollment
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}